/*import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
*/



import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

//import Amplify from 'aws-amplify-react-native';

//import { withAuthenticator } from 'aws-amplify-react-native';
import TabNavigator from 'react-native-tab-navigator';

//import aws_exports from './aws-exports';

import I18n from './src/Utils/i18n';

import theme from './src/Utils/theme';

import {Dimensions} from 'react-native'

const deviceW = Dimensions.get('window').width

const basePx = 375

function px2dp(px) {
  return px *  deviceW / basePx
}


import CreditCard from './src/Screens/CreditCard';
import LineChart from './src/Screens/LineChart';
import PieChart from './src/Screens/PieChart';
import Rocket from './src/Screens/Rocket';
import User from './src/Screens/User';



//Amplify.configure(aws_exports);

class App extends React.Component {
  state= {
    selectedTab: 'creditCard'
  };
  render() {
    return (
      <TabNavigator style={styles.container}>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'creditCard'}
          title="Wallet"
          selectedTitleStyle={{color: "#3496f0"}}
          renderIcon={() => <Icon name="credit-card" size={px2dp(22)} color="#4e8e96"/>}
          renderSelectedIcon={() => <Icon name="credit-card" size={px2dp(22)} color="#3496f0"/>}
          onPress={() => this.setState({selectedTab: 'creditCard'})}>
          <CreditCard/>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'lineChart'}
          title="Trade"
          selectedTitleStyle={{color: "#3496f0"}}
          renderIcon={() => <Icon name="line-chart" size={px2dp(22)} color="#4e8e96"/>}
          renderSelectedIcon={() => <Icon name="line-chart" size={px2dp(22)} color="#3496f0"/>}
          onPress={() => this.setState({selectedTab: 'lineChart'})}>
          <LineChart/>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'pieChart'}
          title="Funt"
          selectedTitleStyle={{color: "#3496f0"}}
          renderIcon={() => <Icon name="pie-chart" size={px2dp(22)} color="#4e8e96"/>}
          renderSelectedIcon={() => <Icon name="pie-chart" size={px2dp(22)} color="#3496f0"/>}
          onPress={() => this.setState({selectedTab: 'pieChart'})}>
          <PieChart/>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'rocket'}
          title="ICO"
          selectedTitleStyle={{color: "#3496f0"}}
          renderIcon={() => <Icon name="rocket" size={px2dp(22)} color="#4e8e96"/>}
          renderSelectedIcon={() => <Icon name="rocket" size={px2dp(22)} color="#3496f0"/>}
          onPress={() => this.setState({selectedTab: 'rocket'})}>
          <Rocket/>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'user'}
          title="Profile"
          selectedTitleStyle={{color: "#3496f0"}}
          renderIcon={() => <Icon name="user" size={px2dp(22)} color="#4e8e96"/>}
          renderSelectedIcon={() => <Icon name="user" size={px2dp(22)} color="#3496f0"/>}
          onPress={() => this.setState({selectedTab: 'user'})}>
          <User/>
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}

//export default withAuthenticator(App);

export default App;


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
